<template>
  <div class="comp">
    <!-- 放置图表的容器 -->
    <div class="chart" ref="crosswise"></div>
  </div>
</template>

<script>

// 引入 vuex 助手
// import { mapState } from "vuex";

// 引入混入文件模块
import mixin from "@/mixins/index.js";
export default {
    // 使用混入
    mixins:[mixin],
    /* computed:{
        ...mapState(['themeName'])
    },
    watch:{
        themeName(newV,oldV){
            console.log(newV,oldV);
            // 1.销毁旧实例
            this.echartsInstance.dispose();
            // 2.echarts实例初始化 静态配置项设置 基础图表绘制
            this.initEcharts();
            // 3.获取业务数据
            this.setEcharts();
            // 4.调用适配方法
            this.adapTive();
        }
    },
  data() {
        return {
            echartsInstance: null, //初始化echarts实例对象
            allData:[]   //业务数据
        };
  },
  beforeDestroy(){
    // 销毁组件之前移除监听器
    window.removeEventListener('click',this.adapTive)
  }, */
  mounted() {
        // console.log(this.$echarts);
        // 1.echarts实例初始化 静态配置项设置 基础图表绘制
        this.initEcharts();
        // 2.获取业务数据
        this.getData();
        // 3.监听窗口变化实现图表自适应
        window.addEventListener('resize',this.adapTive);
        // 4.调用适配方法
        this.adapTive();
  },
  methods: {
    // 1.echarts实例初始化 静态配置项设置 基础图表绘制
    initEcharts() {
        // 1.1获取实例
        this.echartsInstance = this.$echarts.init(this.$refs.crosswise, this.themeName);
        //console.log(this.echartsInstance);

        // 1.2设置绘图需要的静态配置项
        let initOptions={
            // 标题
            title:{
                text:"▌各地区种植面积统计TOP10",
                // textStyle:{  //适配了
                //     fontSize:40
                // },
                top:"3%",
                left:"3%"
            },

            // 提示
            tooltip:{
                show:true,
                trigger:"axis",
                axisPointer:{
                    type:"shadow"
                }
            },

            // 坐标系
            grid:{
                show:true,
                top:"12%",
                left:"3%",
                right:"5%",
                bottom:"3%",
                containLabel:true
            },

            // x轴
            xAxis:{
                type:"value"
            },
            // y轴
            yAxis:{
                type:"category"
            },

            // 图表类型
            series:[
                {
                    type:"bar",
                    label:{
                        show:true,
                        position:"right"
                    },
                    itemStyle:{
                        // borderRadius:[0,50,50,0],  //圆角适配
                        color:{ 
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 0,
                            colorStops: [{
                            offset: 0, color: 'red' // 0% 处的颜色
                            }, {
                            offset: 1, color: 'orange' // 100% 处的颜色
                            }]
                        }
                    }
                }
            ]

        }



        // 1.3绘制基础图表
        this.echartsInstance.setOption(initOptions)

    },

    // 2.获取业务数据
    async getData(){
        let {data} = await this.$http.get('plantingAreaTop')
        // console.log(data);
        this.allData = data;
        //调用根据业务继续完善图表
        this.setEcharts()
    },

    //3.根据业务继续完善图表
    setEcharts(){
        // 1.组装类目数据和系列数据
        let cateData = this.allData.map(item=>item.name)
        let serData =this.allData.map(item=>item.area)
        // console.log(cateData,serData);

        // 2.设置绘图配置项
        let setOptions={
            // y轴
            yAxis:{
                data:cateData
            },
            // 图表类型
            series:[
                {
                    data:serData
                }
            ]
        }
        // 3.setOption 合并多次的绘图配置项 完善图表
        this.echartsInstance.setOption(setOptions)

    },

    // 4.窗口适配方法
    adapTive(){
        // console.log('走适配了');

        // 通过比例尺的思想解决坐标系外的适配问题
        let width = this.$refs.crosswise.offsetWidth; 
        // 3.5-3.7
        let scale = width / 100 * 3.6
        // 设置动态需要适配的配置项
        let adapOptions = {
            // 标题
            title:{
                textStyle:{
                    fontSize:scale
                }
            },
            // 柱子宽度 圆角
            series:[{
                barWidth:scale,
                itemStyle:{
                    borderRadius:[0,scale/2,scale/2,0], 
                }
                
            }]
        }
        // 适配绘图
        this.echartsInstance.setOption(adapOptions)

        
        // 处理坐标系内的图图表适配
        this.echartsInstance.resize()
    }
  },
};
</script>

<style>
</style>